// src/views/data/HighCharts.tsx
import { FC, useEffect, useState } from 'react'
import * as Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'

interface IHighChartsProps { }

const HighCharts: FC<IHighChartsProps> = (props: HighchartsReact.Props) => {
    // 设置基础数据源
    const [option, setOption] = useState<Highcharts.Options>({
        title: {
            text: '企业员工规模'
        },
        series: [{
            type: 'line',
            data: [10, 2, 3]
        }]
    })
    useEffect(() => {
        window.addEventListener('resize', () => {
            setOption({
                title: {
                    text: '企业员工规模'
                },
                series: [{
                    type: 'line',
                    data: [1, 5, 3]
                }]
            })
        })
    }, [])
    return (
        <div style={{ width: 600 }}>
            <h1>HighCharts</h1>
            <HighchartsReact
                highcharts={Highcharts}
                options={option}
                {...props}
            />
        </div>
    )
};

export default HighCharts;